<template>
    <fh title="分类" />

    <van-row>
        <van-col span="8"><van-sidebar v-model="active">
                <van-sidebar-item v-for="titme in categoriesApidata" :title="titme.cat_name" />

            </van-sidebar></van-col>
        <van-col span="16">
            <lb :image="image"></lb>
            <div v-for="titme in categoriesApidata[active]?.children">
              <router-link :to="'/xq/'+titme.goods_id">
                <van-grid :column-num="4">
                    <van-grid-item v-for="titme in titme.children" :icon="titme.cat_icon" :text="titme.cat_name" />
                </van-grid>
                </router-link>
            </div>
        </van-col>

    </van-row>
</template>

<script setup>
import fh from '@/components/fh.vue';
import lb from '@/components/lb.vue';
import { ref } from 'vue';
import { categoriesApi } from '@/api/api'

const categoriesApidata = ref([])
categoriesApi().then((res) => {
    console.log(res);
    categoriesApidata.value = res.data.message

})
let active = ref(0)

// 轮播

   const image = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
    ];
</script>

<style lang="scss" scoped></style>